<template>
  <div>
    水温：{{ temp }} 水位：{{ level }}

    <button @click="handleTemp">增加水温</button>
    <button @click="handleLevel">增加水位</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

let temp = ref(0)
let level = ref(0)

const handleTemp = () => {
  temp.value = temp.value + 10
}
const handleLevel = () => {
  level.value = level.value + 10
}
// 需要指定监视的源
watch([temp, level], (newVal) => {
  console.log('watch执行了')
  const [temp, level] = newVal // 解构赋值
  if (temp > 100 || level > 100) {
    console.log('发送请求')
  }
})

watchEffect(() => {
  console.log('watchEffect执行了')
  if (temp.value > 100 || level.value > 100) {
    console.log('发送请求2')
  }
})
</script>
<style scoped></style>
